<script setup name="home">
import OAMain from '@/components/OAMain.vue';
import { ref, reactive, onMounted, watch } from "vue";
import timeFormatter from '@/utils/timeFormatter';
import homeHttp from '@/api/homehttp';
import { ElMessage } from 'element-plus';
import OADialog from '@/components/OADialog.vue';
import { useAuthStore } from '@/stores/auth';
import * as echarts from 'echarts';


let informs = ref([])
let absents = ref([])

onMounted(async () => {
    try {
        informs.value = await homeHttp.getLatestinforms()
        absents.value = await homeHttp.getLatestabsents()
        // console.log(informs.value)
        // console.log(absents.value)
        let rows = await homeHttp.getDepartmentStaffCount()
        // console.log(rows)
        let xdatas = []
        let ydatas = []
        for (let row of rows) {
            xdatas.push(row.name)
            ydatas.push(row.staff_count)
        }
        // console.log(xdatas)
        // console.log(ydatas)
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('deptstafcnt'));
        // 绘制图表
        myChart.setOption({
            tooltip: {},
            xAxis: {
                data: xdatas
            },
            yAxis: {},
            series: [
                {
                    name: '员工数量',
                    type: 'bar',
                    data: ydatas
                }
            ]
        });
    } catch (err) {
        ElMessage.error(err)
    }

})
</script>



<template>
    <OAMain title="首页">
        <el-card>
            <template #header>
                <h2>部门员工数量</h2>
            </template>
            <div id="deptstafcnt" style="width: 100%;height:300px;"></div>
        </el-card>

        <el-row :gutter="20">
            <el-col :span="12">
                <el-card>
                    <template #header>
                        <h2>最新通知</h2>
                        <el-table :data="informs">
                            <el-table-column label="标题">
                                <template #default="scope">
                                    <router-link :to="{name:'inform_detail',params:{pk:scope.row.id}}">
                                        {{ scope.row.title }}
                                    </router-link>
                                </template>
                            </el-table-column>
                            <el-table-column label="发布者" prop="author.realname"></el-table-column>
                            <el-table-column label="发布时间">
                                <template #default="scope">
                                    {{ timeFormatter.stringFromDate(scope.row.create_time) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="是否已读">
                                <template #default="scope">
                                    <el-tag v-if="scope.row.reads.length>0">已读</el-tag>
                                    <el-tag v-else type="danger">未读</el-tag>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card>
                    <template #header>
                        <h2>最新请假</h2>
                    </template>
                    <el-table :data="absents">
                        <el-table-column label="部门" prop="requester.department.name"></el-table-column>
                        <el-table-column label="发起人" prop="requester.realname"></el-table-column>
                        <el-table-column label="起始日期">
                            <template #default="scope">
                                {{ timeFormatter.stringFromDate(scope.row.start_date) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="结束日期">
                            <template #default="scope">
                                {{ timeFormatter.stringFromDate(scope.row.end_date) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="发起时间">
                            <template #default="scope">
                                {{ timeFormatter.stringFromDateTime(scope.row.create_date) }}
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
    </OAMain>
</template>



<style scoped></style>